<template>
  <div>
    <h1 class="text-red">我是远程加载的页面</h1>
    <input v-model="input" placeholder="placeholder" @input="changeValue"/>
    <button @click="emitParentFun">调用父组件的方法</button>
  </div>
</template>

<script setup>
import {defineProps,defineEmits,ref,onMounted} from "vue"

const props = defineProps(['modelValue'])
// 更新model绑定的值固定写法: update:modelValue
const emit = defineEmits(['update:modelValue',"childClick"])

let input = ref("")

onMounted(()=>{
  input.value = props.modelValue
  // window环境指向的是接收方的window环境
  console.log(window.testName);
})

const changeValue = (e) => {
  // 修改父组件的值
  emit('update:modelValue',e.target.value)
}

const emitParentFun = ()=>{
  emit('childClick',input.value)
}
</script>


<style scope>
.text-red{
  color: red;
}
</style>